<template>
  <div class="app-container">
    <el-card>
      <el-form :model="queryList" :inline="true" label-width="68px">
        <el-form-item label="仓库名称">
          <el-select v-model="queryList.stoName" placeholder="请输入仓库名称" clearable :style="{ width: '100%' }" remote
            :remote-method="searchSelectNccUserCode" :loading="loading" filterable>
            <el-option v-for="item in strocknameOptions" :label="item.label" :value="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="仓库编号">
          <el-input v-model="queryList.stoCode" placeholder="请输入仓库编号" clearable style="width: 150px" />
        </el-form-item>
        <el-form-item>
          <!-- <el-button type="primary" icon="el-icon-plus" v-hasPermi="['basic:nccBasic:add']" @click="addDialog('add')">新增</el-button> -->
          <el-button type="primary" icon="el-icon-search"  @click="filterDire">查询</el-button>
          <el-button type="danger" icon="el-icon-refresh" @click="clearAll">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-table :data="strockList" border height="605px">
        <el-table-column type="index" label="序号" align="center"> </el-table-column>
        <el-table-column prop="stoName" label="仓库名称" align="center"></el-table-column>
        <el-table-column prop="stoCode" label="仓库编号" align="center"></el-table-column>
        <el-table-column prop="creator" label="创建人" align="center"></el-table-column>
        <el-table-column prop="createtime" label="创建时间" align="center"></el-table-column>
        <!-- <el-table-column prop="isglph" label="是否管理批号" align="center"></el-table-column>
        <el-table-column prop="isljfkc" label="是否拦截负库存" align="center"></el-table-column>
        <el-table-column prop="isdd" label="是否调度" align="center"></el-table-column> -->
        <!-- <el-table-column prop="ckzht" label="仓库状态" align="center"></el-table-column> -->
        <!-- <el-table-column prop="creationtime" label="创建时间" align="center"></el-table-column> -->
        <!-- <el-table-column label="是否启用" align="center">
          <template slot-scope="scope">
            <el-switch :value="scope.row.enableState" :active-value="'1'" :inactive-value="'0'" active-color="#13ce66"
             v-hasPermi="['basic:nccBasic:stateEdit']" inactive-color="#ff4949" @change="toggleState(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="addDialog('edit', scope.row)"
             v-hasPermi="['basic:nccBasic:edit']" :disabled="scope.row.enablestate === '1'">修改</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination background layout=" total,prev, pager, next, sizes,jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="queryList.pageNum" :page-size="queryList.pageSize"
        :page-sizes="[10, 20, 50, 100]" :total="total">
      </el-pagination>
    </el-card>
    <nccStrockAdd ref="strockAddRef" :visible.sync="visible" @addSuccess="addSuccess" />
  </div>
</template>

<script>
import nccStrockAdd from "@/components/BasicInformation/nccStrockAdd.vue"
import {
  findNccBasicStoStockData,
  nccBasicStoStockEnableState,
  findNccBasicStoStockName//模糊查询
} from '@/api/basic/PersonnelInformation.js'
export default {
  components: {
    nccStrockAdd
  },
  data() {
    return {
      queryList: {
        stoName: '', //仓库名称
        stoCode: '', //仓库编号
      },
      strockList: [], //el-table数据
      total: 0,
      visible: false,
      strocknameOptions: [],
      loading: false
    };
  },
  created() {
    this.getNccStrock();
  },
  methods: {
    /**
 * 远程搜索函数
 * 获取NCC用户信息-code
 */
    searchSelectNccUserCode(query) {
      if (query !== '') {
        this.loading = true; // 开始加载
        const params = {
          name: query, // 传入输入的关键字
        };
        // 调用接口进行用户信息查询
        findNccBasicStoStockName(params)
          .then(response => {
            // 更新物料选项
            this.strocknameOptions = response.map(item => ({
              value: item, // 用户主键
              label: item, // 用户名称
            }));
            this.loading = false; // 开始加载
          })
      }
    },
     formatState(row, column, cellValue) {
        return cellValue === '1' ? '是' : '否';
      },
    getNccStrock() {
      findNccBasicStoStockData(this.queryList).then(response => {
        this.strockList = response.rows;
        this.total = response.total;
      });
    },
    //新增/修改后刷新列表
    addSuccess() {
      this.getNccStrock();
    },
    clearAll() {
      this.queryList = {
        nccStoName: "",
        nccStoCode: null,
      };
      this.getNccStrock();
    },
    filterDire() {
      this.getNccStrock()
    },
    // 任务状态修改
    toggleState(row) {
      // 根据 enablestate 判断是启用还是停用
      let text = row.enablestate === "0" ? "停用" : "启用";
      let query = {
        state: row.enablestate === "0" ? "1" : "0", // 状态切换：如果是 "2"（禁用），则切换为 "1"（启用）；反之亦然
        pkStoDoc: row.pK_STORDOC
      };
      // 弹出确认框
      this.$confirm(`确认要${text}此项任务吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 更新状态
        nccBasicStoStockEnableState(query).then(res => {
          // 显示成功消息
          this.$message({
            type: 'success',
            message: `${text}成功!` // 根据操作状态来动态显示消息
          });
          // 更新列表或者执行其他操作（例如刷新数据等）
          this.getNccStrock(); // 这里假设有一个方法用于刷新列表数据
        }).catch(error => {
          // 错误处理
          this.$message({
            type: 'error',
            message: `操作失败: ${error.message || '未知错误'}` // 显示错误消息
          });
        });
      }).catch(() => {
        // 用户取消了操作
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },

    addDialog(type, row) {
      this.visible = true;
      this.$refs.strockAddRef.openDialog(type, row);
    },
    handleSizeChange(newsize) {
      this.queryList.pageNum = 1
      this.queryList.pageSize = newsize
      this.getNccStrock()
    },
    handleCurrentChange(newpage) {
      this.queryList.pageNum = newpage
      this.getNccStrock()
    },
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.el-card {
  margin-bottom: 20px;
}

.btn el-button {
  margin-bottom: 20px;
}

.el-pagination {
  float: right;
  margin: 20px;
}
</style>
